import React from "react";
import MyContext from "./context";

class LearnContext3 extends React.Component {

  hello () {
    /**
     * 接收到context传来的方法
     * 在适当的事件调用并传参
     * 完成一个跨层级传值
     */
    console.log(this.context)
    this.context.onHandle('哈喽爷爷')
  }

  /**
   * 可以定义一个静态属性contextType
   * 赋值为要接受context对象
   *
   * 在组件里面就可以直接使用 this.context 接收
   */
  // static contextType = MyContext;
  render() {
    console.log("爷爷传过来的", this.context);
    // return (
    //   <MyContext.Consumer>
    //     {/*
    //       使用Consumer组件
    //       在里面写一个回调函数
    //       函数里面会携带一个参数
    //       就是最上级组件下发下来的
    //     */}
    //     {(context) => (
    //       <div>
    //         <div>孙子 --- {context.msg}</div>
    //       </div>
    //     )}
    //   </MyContext.Consumer>
    // );
    return (
      <div>
        <div>孙子 --- {this.context.msg} 222</div>
        <button onClick={() => this.hello()}>给爷爷问声好</button>
      </div>
    );
  }
}
LearnContext3.contextType = MyContext;

export default LearnContext3;
